<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="./css/GlobalStyle.css">
    <style> 
        html{
            width:100%;
            overflow-x:hidden;
        }
        .CarouselboxImg li{
            list-style: none;
        }

        #slideshow img{
            transition: all 0.4s
        }
        #slideshow img:hover{
            transform: scale(1.07);
        }
        .Main1 img{
            transition: all 0.6s;
        }
        .Main1 img:hover{
            transform: scale(1.07);
        }
        .left embed{
            width: 250px;
            height: 200px;
            color: rgb(255,255,255);
        }
        .anlist{
            color: red;
        }
        .CarouselboxImg{
            width: 100%;
            height: 300px;
	        list-style: none;
            position: absolute;
            left:0;
            top:92px;
            padding-left: 0px; 
            z-index: 10;
        }
        .item.active{
            opacity: 1;
            z-index: 10;
        }
         .CarouselboxImg img{
            margin-top: 0px;
            margin-left: 40px;
           width: 700px;
           height: 300px;
           padding-left:216px;
           z-index: 10;
           transition: all 0.6s;
        } 
        .item
        {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 50px;
            color: #fff;
            opacity: 0;
            transition: all .8s;
        }
        .item:nth-child(1){
            background-color: rgb(123,103,92);
        }
        .item:nth-child(2){
            background-color: rgb(3,31,105);
        }
        .item:nth-child(3){
            background-color: rgb(65,50,155);
        }
        .item:nth-child(4){
            background-color: rgb(39,51,189);
        }
        .item:nth-child(5){
            background-color: rgb(245,233,221);
        }
        .item:nth-child(6){
            background-color: rgb(73,3,1);
        }
        .item:nth-child(7){
            background-color: rgb(179,35,62);
        }
        .item:nth-child(8){
            background-color: rgb(73,68,62);
        }
        .btn{
            width: 50px;
            height: 100px;
            font-size: 70px;
            color: rgb(183,183,196);
            background-color: transparent;
            border: 0px solid  transparent;
            position: absolute;
            top:150px;
            z-index: 100;
        }
        #left{
            left:150px;
            top:190px;
            border: none;
            outline: none;
        }
        #right{   
            right:150px;
            top:190px;
            border: none;
            outline: none;
        }
        .btn:hover{
            background-color: rgb(84,100,109);
        }
        .item.active{
            opacity: 1;
            z-index: 10;
        }
        .pointList{
            padding-left: 0px;
            list-style: none;
            position: absolute;
            top:360px;
            left:280px;
            z-index: 1000;
        }
        .point{
            width:10px;
            height: 10px;
            background-color: rgba(0,0,0,0.4);
            border-radius: 100%;
            float: left;
            margin-left: 13px;
            border: 1px solid rgba(225,225,225,0.6);
            cursor: pointer;
        }
        .point.active{
            background-color: rgb(200,13,13);
        }
        .songbox1{
            margin-left: 20px;
            margin-top: 4px;
            float: left;
        }
        .songbox2{
            margin-left: 50px;
            margin-top: 4px;
        }
        .songall{
            width: 60px;
            height: 25px;
            /* background-color: ; */
            position: absolute;
            bottom: 3px;
            right: 20px;
        }
        .allfont{
            font-size: 12px;
        }
        .returntop{
            width: 50px;
            height: 50px;
            /* background-color: pink; */
            position: fixed;
            right: 100px;
            bottom: 100px;
        }
        .returntopbtn{
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            z-index: 9999;
            background-color: rgb(243,243,243);
        }
        .returntopbtn:hover{
            background-color: rgb(237,237,237);
        }
    </style>
    <script type="">
        
    </script>
</head>
<body>
    <nav class="navbar" role="navigation">
        <div class="container">
            
            <div class="navbox">
                <ul class="nav">
                    <!-- <script> -->
                    <li class="">
                        <!-- <a class="one" href=""> -->
                            <img id="logo" src="./img/logo.png" alt="">
                            <input type="text">
                        <!-- </a> -->
                    </li>
                    <li class="navlist"><a class="load" href="">登陆</a></li>                   
                    <li class="navlist"><a class="one" href="">发现音乐</a></li>
                    <li class="navlist"><a class="one" href="">我的音乐</a></li>
                    <li class="navlist"><a class="one" href="">朋友</a></li>
                    <li class="navlist"><a class="one" href="">商城</a></li>
                    <li class="navlist"><a class="one" href="">音乐人</a></li>
                    <li class="navlist"><a class="one" href="" >下载客户端</a></li>
                    <li class="navlist"><a class="framer" href="">创作者中心</a></li>
                    <!-- </script> -->
                    <li class="navspace"></li>
                    <li class="navbutton">
                        <img id="search" src="./icons/search.svg" alt="">
                    </li>
                </ul>
            </div>
            <div class="navbox1">
                <li class="navlist"><a class="" href="" style="margin-left: 60px;">推荐</a></li>
                <li class="navlist"><a class="" href="">排行榜</a></li>
                <li class="navlist"><a class="" href="">歌单</a></li>
                <li class="navlist"><a class="" href="">主播电台</a></li>
                <li class="navlist"><a class="" href="">歌手</a></li>
                <li class="navlist"><a class="" href="">新曲上架</a></li>
            </div>
        </div>
    </nav>
    <div class="Carouselbox" id="slideshow">
        <ul class="CarouselboxImg" id="picu1">
            <li class="item active"><a href="#"><img src="./img/0.jpg"></a></li>
            <li class="item "><a href="#"><img src="./img/1.jpg"></a></li>
            <li class="item "><a href="#"><img src="./img/2.jpg"></a></li>
            <li class="item "><a href="#"><img src="./img/3.jpg"></a></li>
            <li class="item "><a href="#"><img src="./img/4.jpg"></a></li>
            <li class="item "><a href="#"><img src="./img/5.jpg"></a></li>
            <li class="item "><a href="#"><img src="./img/6.jpg"></a></li>
            <li class="item "><a href="#"><img src="./img/7.jpg"></a></li>
        </ul>
        <ul class="pointList">
                <li class="point active" date-index = '0'></li>
                <li class="point" date-index = '1'></li>
                <li class="point" date-index = '2'></li>
                <li class="point" date-index = '3'></li>
                <li class="point" date-index = '4'></li>
                <li class="point" date-index = '5'></li>
                <li class="point" date-index = '6'></li>
                <li class="point" date-index = '7'></li>
        </ul>
        <button type="button" class="btn" id="left"><</button>
        <button type="button" class="btn" id="right">></button>   
            
        <div class="download">
            <a class="" href="">
                <img src="./img/ke.png">
            </a>
        </div>
        <div class="CarouselboxTitleAndButton">
            <div class="CarouselboxTitle">
                <div class="Carouseltext">
                    <span id="CarouselTitle"></span>
                    <span id="CarouselName"></span>
                    <span id="CarouselName"></span>
                </div>
            </div>
            
        </div>
    </div>
    
    <div class="Main">
        <div class="left">
            <!-- <embed src="./embed/LE_celluloid_end - 副本.mp3"  autostart="flase" loop="flase"> -->
        </div> 
        <div class="right">

        </div>
        <div class="Main1">            
            <div class="list1"> 
                <div class="icobox1">
                    <div class="ico"></div>
                </div>              
                <div class="">
                    <li class="navlist"><a class="one" href="" style="margin-left: 8px;">热门推荐</a></li>                   
                    <li class="navlist"><a class="list" href="" style="margin-left: 38px;">华语</a></li>
                    <li class="navlist"><a class="list" href="" style="margin-left: 30px;">流行</a></li>
                    <li class="navlist"><a class="list" href="" style="margin-left: 28px;">摇滚</a></li>
                    <li class="navlist"><a class="list" href="" style="margin-left: 28px;">民谣</a></li>
                    <li class="navlist"><a class="list" href="" style="margin-left: 28px;">电子</a></li>
                    <li class="navlist"><a class="list" href="" style="margin-left: 28px;">更多→</a></li>
                </div>
            </div>
            <div class="songlist1">
                <div class="img1">
                    <img src="./img/歌单0.png">
                    <li class=""><a class="" href="">你的名字，我的心事。</a></li>
                </div>
                <div class="img1">
                    <img src="./img/奶茶.png">
                    <li class=""><a class="" href="">奶茶店循环歌单。</a></li>
                </div>
                <div class="img1">
                    <img src="./img/春日.png">
                    <li class=""><a class="" href="">春日出逃。</a></li>
                </div>
                <div class="img1">
                    <img src="./img/甜.png">
                    <li class=""><a class="" href="">甜甜的纯音乐。</a></li>
                </div>
            </div>
            <div class="list2">
                <div class="icobox1">
                    <div class="ico"></div>
                </div>              
                <div class="">
                    <li class="navlist"><a class="one" href="" style="margin-left: 8px;">新歌上架</a></li>                   
                    <li class="navlist"><a class="list" href="" style="margin-left: 445px;">更多→</a></li>
                </div>
            </div>
            <div class="songlist2">
                <div class="img1">
                    <img src="./img/在一起嘛好不好.png">
                    <li class=""><a class="" href="">在一起嘛好不好</a></li>
                    <li class="songer"><a class="songer2" href="">李荣浩</a></li>
                </div>
                <div class="img1">
                    <img src="./img/NA.png">
                    <li class=""><a class="" href="">NANA |</a></li>
                    <li class="songer"><a class="songer2" href="">欧阳娜娜</a></li>
                </div>
                <div class="img1">
                    <img src="./img/范.png">
                    <li class=""><a class="" href="">EMERGING</a></li>
                    <li class="songer"><a class="songer2" href="">范丞丞</a></li>
                </div>
                <div class="img1">
                    <img src="./img/皆可.png">
                    <li class=""><a class="" href="">皆可</a></li>
                    <li class=""><a class="songer2" href="">田馥甄</a></li>
                </div>
            </div>
            <div class="list3">
                <div class="icobox1">
                    <div class="ico"></div>
                </div>              
                <div class="">
                    <li class="navlist"><a class="one" href="" style="margin-left: 8px;">榜单</a></li>                   
                    <li class="navlist"><a class="list" href="" style="margin-left: 485px;">更多→</a></li>
                </div>
            </div>
            <div class="songlist3" style="padding-top: 1px;">
                <div class="listbox">
                    <div class="listone">
                        <div class="songone">
                            <img src="./img/飙升榜.png">
                            <div class="">
                                <li class="anlist"><a class="" href="">飙升榜</a></li>
                            </div>
                        </div>
                        <div class="anlist1">
                            <div class="odd"id="song"">
                                   <div class="songbox1" style="font-size: 18px;color: rgb(201,60,59);">
                                        1
                                   </div>
                                   <div class="songbox2" >
                                        <a class="" href="" style="font-size: 12px;">谁</a>
                                   </div>
                            </div>
                            <div class="even"id="song">
                                <div class="songbox1" style="font-size: 18px;color: rgb(201,60,59);">
                                    2
                               </div>
                               <div class="songbox2" >
                                    <a class="" href="" style="font-size: 12px;">隔岸</a>
                               </div>
                            </div>
                            <div class="odd"id="song" >
                                <div class="songbox1" style="font-size: 18px;color: rgb(201,60,59);">
                                    3
                               </div>
                               <div class="songbox2" >
                                    <a class="" href="" style="font-size: 12px;">赤伶</a>
                               </div>
                            </div>
                            <div class="even"id="song">
                                <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                    4
                               </div>
                               <div class="songbox2" >
                                    <a class="" href="" style="font-size: 12px;">丢了你</a>
                               </div>
                            </div>
                            <div class="odd"id="song" >
                                <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                    5
                               </div>
                               <div class="songbox2" >
                                    <a class="" href="" style="font-size: 12px;">海底</a>
                               </div>
                            </div>
                            <div class="even"id="song" >
                                <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                    6
                               </div>
                               <div class="songbox2" >
                                    <a class="" href="" style="font-size: 12px;">画皮</a>
                               </div>
                            </div>
                            <div class="odd"id="song" >
                                <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                    7
                               </div>
                               <div class="songbox2" >
                                    <a class="" href="" style="font-size: 12px;">不想睡</a>
                               </div>
                            </div>
                            <div class="even"id="song" >
                                <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                    8
                               </div>
                               <div class="songbox2" >
                                    <a class="" href="" style="font-size: 12px;">丢了你（女版）</a>
                               </div>
                            </div>
                            <div class="odd"id="song" >
                                <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                    9
                               </div>
                               <div class="songbox2" >
                                    <a class="" href="" style="font-size: 12px;">最后一页</a>
                               </div>
                            </div>
                            <div class="even"id="song" >
                                <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                    10
                               </div>
                               <div class="songbox2" >
                                    <a class="" href="" style="font-size: 12px;">The Best For You</a>
                               </div>
                            </div>
                        </div>
                    </div>
                    <div class="listtwo">
                        <div class="songone">
                            <img src="./img/新歌榜.png">
                            <div class="">
                                <li class="anlist"><a class="" href="" style="color: rgb(67,178,184);">新歌榜</a></li>
                            </div>
                        </div>
                        <div class="anlist1">
                            <div class="odd"id="song"">
                                <div class="songbox1" style="font-size: 18px;color: rgb(201,60,59);">
                                     1
                                </div>
                                <div class="songbox2" >
                                     <a class="" href="" style="font-size: 12px;">But U</a>
                                </div>
                         </div>
                         <div class="even"id="song">
                             <div class="songbox1" style="font-size: 18px;color: rgb(201,60,59);">
                                 2
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">脆弱星球</a>
                            </div>
                         </div>
                         <div class="odd"id="song" >
                             <div class="songbox1" style="font-size: 18px;color: rgb(201,60,59);">
                                 3
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">谁</a>
                            </div>
                         </div>
                         <div class="even"id="song">
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 4
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">隔岸</a>
                            </div>
                         </div>
                         <div class="odd"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 5
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">飞翔吧！少年</a>
                            </div>
                         </div>
                         <div class="even"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 6
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">下落不明</a>
                            </div>
                         </div>
                         <div class="odd"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 7
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">在一起嘛好不好</a>
                            </div>
                         </div>
                         <div class="even"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 8
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">白船</a>
                            </div>
                         </div>
                         <div class="odd"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 9
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">你啊你啊</a>
                            </div>
                         </div>
                         <div class="even"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 10
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">藏心</a>
                            </div>
                         </div>
                        </div>
                    </div>
                    <div class="listthree">
                        <div class="songone">
                            <img src="./img/原创榜.png">
                            <div class="">
                                <li class="anlist"><a class="" href="" style="color: rgb(195,73,105);">原创榜</a></li>
                            </div>
                        </div>
                        <div class="anlist1">
                            <div class="odd"id="song"">
                                <div class="songbox1" style="font-size: 18px;color: rgb(201,60,59);">
                                     1
                                </div>
                                <div class="songbox2" >
                                     <a class="" href="" style="font-size: 12px;">烟火散落</a>
                                </div>
                         </div>
                         <div class="even"id="song">
                             <div class="songbox1" style="font-size: 18px;color: rgb(201,60,59);">
                                 2
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">玫红色的星球</a>
                            </div>
                         </div>
                         <div class="odd"id="song" >
                             <div class="songbox1" style="font-size: 18px;color: rgb(201,60,59);">
                                 3
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">我爱你，怎么就</a>
                            </div>
                         </div>
                         <div class="even"id="song">
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 4
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">请允许我成为你的夏季</a>
                            </div>
                         </div>
                         <div class="odd"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 5
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">破坏之王</a>
                            </div>
                         </div>
                         <div class="even"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 6
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">But U</a>
                            </div>
                         </div>
                         <div class="odd"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 7
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">隔岸</a>
                            </div>
                         </div>
                         <div class="even"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 8
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">有幸来过</a>
                            </div>
                         </div>
                         <div class="odd"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 9
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">关于两性的定义</a>
                            </div>
                         </div>
                         <div class="even"id="song" >
                             <div class="songbox1" style="font-size: 16px;color: rgb(105,105,105);">
                                 10
                            </div>
                            <div class="songbox2" >
                                 <a class="" href="" style="font-size: 12px;">害怕打扰</a>
                            </div>
                         </div>
                        </div>
                    </div>
                </div>
                <div class="songall">
                    <div class="allfont" ><a class="" href="">查看全部</a></div>
                </div>              
            </div>
            <!-- 还需填入 -->
        </div>
        <div class="ps">
            <div class="psimg">
                <a class="" href="">
                    <img src="./img/deng.png">
                </a>
            </div>
            <div class="pslist1">
                <li class="navlist"><a class="" href="" style="font-size: 15px;">入驻歌手</a></li>
                <li class="navlist"><a class="" href="" style="font-size: 12px;">查看全部</a></li>
            </div>
            <div class="psbox">
                <a class="" href="">
                    <img src="./img/张惠妹.png">
                </a>
            </div>
            <div class="psbox">
                <a class="" href="">
                    <img src="./img/Fine乐队.png">
                </a>
            </div>
            <div class="psbox">
                <a class="" href="">
                    <img src="./img/赵雷.png">
                </a>
            </div>
            <div class="psbox1">
                <a class="" href="">
                    <img src="./img/申请.png">
                </a>
            </div>
            <div class="pslist1" style="margin-top: 15px;">
                <li class="navlist"><a class="" href="" style="font-size: 13px;">热门主播</a></li>
            </div>
            <div class="psbox2">
                <a class="" href="">
                    <img src="./img/主播.png">
                </a>
            </div>
        </div>       
    </div>
    <div  class="bottom">
        <div class="bottombox">                   
            <li class="navlist"><a class="list" href="" style="margin-left: 55px;">服务条款 |</a></li>
            <li class="navlist"><a class="list" href="" style="margin-left: 20px;">隐私政策 |</a></li>
            <li class="navlist"><a class="list" href="" style="margin-left: 0px;">儿童隐私政策 |</a></li>
            <li class="navlist"><a class="list" href="" style="margin-left: 0px;">版权投诉指引 |</a></li>
            <li class="navlist"><a class="list" href="" style="margin-left: 0px;">意见反馈 |</a></li>         
        </div>       
    </div>
    <div class="returntop">
        <button type="button" class="returntopbtn">Top</button>
    </div>
</body>
<script>
        var items = document.getElementsByClassName('item');
        var goProbtn = document.getElementById('left');//左按钮
        var goNextbtn = document.getElementById('right');//右按钮
        var points = document.getElementsByClassName('point');//小点点
        var ontime = document.getElementsByClassName('Carouselbox');

        var index = 0;

        var time = null;

        var clearActive = function(){
            for(var i=0; i<items.length; i++){
                items[i].className = 'item';
            }
            for(var i=0; i<items.length; i++){
                points[i].className = 'point';
            }
        };//清除之前的active；

        var goIndex = function(){   
            clearActive(); 
            points[index].className = 'point active';      
            items[index].className = 'item active';
        };//给第index个list active的类名

        var goPro = function(){
            if(index>0)
            {
                index--;
            }
            else
            {
                index=4;
            }
            goIndex();
        };//图片朝左移动，及上一张

        var goNext =function(){
            if(index<4)
            {
                index++;
            }
            else
            {
                index=0;
            }
            goIndex();
        };//图片朝右移动，及下一张


      goProbtn.addEventListener('click',function(){
          goPro();
      });//点击右按钮
      
      goNextbtn.addEventListener('click',function(){
          goNext();
      });//点击左按钮

      for(var i=0; i<points.length ; i++){
            points[i].addEventListener('click',function(){
                var pointIndex = this.getAttribute('date-index');
                index = pointIndex;
                goIndex();
            });
      }//点击小点点

      //定时器
     time = setInterval(function(){
         goNext();
     },3000);

    ontime.onmouseover = () =>{
           clearInterval(time);
       }

       ontime.onmouseout = function(){
           time = setInterval(function(){
               goNext();
           },3000);
       };
</script>
<script src="http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js"></script>
<script>
    $(function(){

$(window).scroll(function(){  //只要窗口滚动,就触发下面代码

    var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度

    if( scrollt >200 ){  //判断滚动后高度超过200px,就显示

        $(".returntopbtn").fadeIn(400); //淡入

    }else{

        $(".returntopbtn").stop().fadeOut(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动

    }

});

$(".returntopbtn").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部

    $("html,body").animate({scrollTop:"0px"},200);

}); 

});
</script>
</html>